<!--
  ~ Copyright (c) 2022 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0
  ~
  ~ SPDX-License-Identifier: EPL-2.0
  -->
<div class="row resizable_pane" style="height: 80vh">
    <div class="col-md-4 resizable_flex_column">
        <div class="input-group has-validation">
            <input class="form-control" id="tableValidationEnvironments" hidden="true"></input>
            <div class="invalid-feedback"></div>
        </div>
        <div class="table-wrap">
            <table class="table table-striped table-hover table-sm">
                <tbody id="tbodyEnvironments"></tbody>
            </table>
        </div>
    </div>
    <div class="col-md-8 resizable_flex_column">
        <ul class="nav nav-tabs nav-fill">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabEnvDetails">Manage</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabEnvJson">JSON</a>
            </li>
        </ul>
        <div class="tab-content" style="flex-grow: 1; overflow: hidden;">
            <div class="tab-pane container active no-margin" id="tabEnvDetails">
                <crud-toolbar label="Name" id="crudEnvironmentFields" allowIdChange>
                    <div class="input-group input-group-sm mt-1">
                        <label class="input-group-text" data-bs-toggle="tooltip"
                            title="URI including protocol, host and port (e.g. http://localhost:8080)">API URI</label>
                        <input type="text" class="form-control form-control-sm" id="inputApiUri" disabled></input>
                    </div>
                    <div class="input-group input-group-sm mt-1">
                        <label class="input-group-text" data-bs-toggle="tooltip"
                            title="A comma-separated list of namespaces (e.g. com.example.namespace). The given namespaces are used as a parameter for the Things search">Search Namespaces</label>
                        <input type="text" class="form-control form-control-sm" spellcheck="false" id="inputSearchNamespaces" disabled></input>
                    </div>
                    <div class="input-group input-group-sm mt-1 mb-3">
                        <label class="input-group-text">Ditto Version</label>
                        <select class="form-select form-select-sm" id="selectDittoVersion" disabled>
                            <option selected value="3">3</option>
                            <option value="2">2</option>
                        </select>
                    </div>    
                    <label class="form-label">Optional Tabs</label>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="inputTabPolicies" disabled>
                        <label class="form-check-label" for="inputTabPolicies">Policies</label>
                      </div>
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="inputTabConnections" disabled>
                        <label class="form-check-label" for="inputTabConnections">Connections</label>
                      </div>
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="inputTabOperations" disabled>
                        <label class="form-check-label" for="inputTabOperations">Operations</label>
                      </div>
            </crud-toolbar>
            </div>
            <div class="tab-pane container no-margin" id="tabEnvJson">
                <crud-toolbar label="Name" id="crudEnvironmentJson" allowIdChange>
                    <div class="ace_container" style="flex-grow: 1;">
                        <div>
                            <div class="script_editor" id="settingsEditor"></div>
                        </div>
                    </div>
                </crud-toolbar>
            </div>
        </div>
    </div>
</div>